<template>
	<view class="container">
		<view class="head-wrap">
			<view class="search-wrap">
				<text class="iconfont iconsearch"></text>
				<input type="text" value="" placeholder="请输入直播内容/主播/商品" class="input" placeholder-class="placeholder" v-model="keyword" @confirm="getRoomList(1)"/>
			</view>
			<view class="anchor-list" v-if="liveingList.length">
				<view class="anchor-head">
					<text class="iconfont iconzhengzaizhibo"></text>
					<text class="_t">直播中</text>
				</view>
				<scroll-view :scroll-x="true" class="list">
					<view class="item" @click="entryRoom(item.room_id)" v-for="(item, index) in liveingList" :key="index">
						<view class="img-wrap">
							<view class="anchor-img">
								<image :src="$util.img(item.cover_img)" mode=""></image>
								<view class="status-mark">直播中</view>
							</view>
						</view>
						<view class="anchor-name">{{ item.anchor_name }}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="body-wrap">
			<view class="tab-nav">
				<view class="tab-item" @click="switchStatus('all')" :class="{ curr: status == 'all' }">热门</view>
				<view class="tab-item" @click="switchStatus('top')" :class="{ curr: status == 'top' }">顶置</view>
				<view class="tab-item" @click="switchStatus('nostart')" :class="{ curr: status == 'nostart' }">未开播</view>
			</view>
			
			<scroll-view scroll-y="true" class="room-list" @scrolltolower="scrolltolower" v-if="roomList.data.length > 0">
				<view class="room-item" v-for="(item, index) in roomList.data" :key="index">
					<view class="room-img">
						<view class="status-mark" :class="{'no-start': item.live_status != 101 }">
							<view>
								<image :src="$util.img('upload/uniapp/have_in.gif')" mode="" v-if="item.live_status == 101"></image>
								<image :src="$util.img('upload/uniapp/no-start.png')" mode="" v-else></image>
								<text>{{ item.status_zh }}</text>
							</view>
						</view>
						<navigator :url="'/promotionpages/live/playback/playback?id=' + item.room_id" v-if="item.has_play_backs && item.live_status != 101">
							<view class="play-back-shade">
								<view class="iconfont iconbofang"></view>
							</view>
						</navigator>
						<image :src="$util.img(item.cover_img)" mode="" @click="entryRoom(item.room_id)"></image>
					</view>
					<view class="room-data">
						<view class="room-name" @click="entryRoom(item.room_id)">{{ item.name }}</view>
						<view class="flex">
							<view class="anchor-info">
								<image :src="$util.img(item.anchor_img)" mode=""></image>
								<text>{{ item.anchor_name }}</text>
							</view>
							<view class="live-time">
								<text class="iconfont icontime"></text>
								<text>{{ item.start_time|livetime }}-{{ item.end_time|livetime }}</text>
							</view>
						</view>
						<view class="goods-wrap">
							<view class="goods-item" v-for="(goodsItem, goodsIndex) in item.goods" :key="goodsIndex" v-if="goodsIndex < 3">
								<navigator :url="goodsItem.url">
									<image :src="$util.img(goodsItem.cover_img)" mode=""></image>
								</navigator>
							</view>
							<view class="more" @click="entryRoom(item.room_id)">
								<view>{{ item.goods_total }}件</view>
								<view>直播购</view>
							</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="roomList.loadingType" ></uni-load-more>
			</scroll-view>
			
			<view class="empty" v-else>
				<image :src="$util.img('upload/uniapp/live-empty.png')" mode=""></image>
				<view class="ns-text-color-gray">暂无直播间数据</view>	
			</view>
		</view>
	</view>
</template>

<script>
	import http from 'common/js/http.js';
	
	export default {
		mixins: [http],
		data() {
			return {
				liveingList: [],
				roomList: {
					page: 1,
					totalPage: 1,
					data: [],
					isLoading: false,
					loadingType: 'loading'
				},
				status: 'all',
				keyword: '',
				livePlayer: null
				
			}
		},
		onLoad() {
			this.livePlayer = requirePlugin('live-player-plugin');
			this.getRoomList(1);
			this.getLiveingList();
		},
		methods: {
			switchStatus(status){
				this.status = status;
				this.getRoomList(1);
			},
			entryRoom(roomId){
				// #ifdef MP-WEIXIN
				let customParams = { path: 'pages/index/index/index'}; 
				wx.navigateTo({
					url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}`
				})
				// #endif
			},
			scrolltolower(){
				this.getRoomList((this.roomList.page + 1));
			},
			getRoomList(page){
				if (this.roomList.isLoading || page > this.roomList.totalPage) return;
				else this.roomList.loadingType = 'nomore';
				
				let data = { page_index: page };
				if (this.status == 'top') data.is_top = 1;
				if (this.status == 'nostart') data.live_status = 102;
				if (this.keyword.trim() != '') data.keyword = this.keyword;
				
				this.roomList.isLoading = true;
				this.roomList.loadingType = 'loading';
				
				this.sendRequest({
					url: 'NsWxappLive.Room.roomlist',
					data,
					success: res => {
						this.roomList.page = page;
						this.roomList.isLoading = false;
						if (page == 1) this.roomList.data = [];
						if (res.code == 0 && res.data.data.length) {
							res.data.data.forEach((item) => {
								this.livePlayer.getLiveStatus({ room_id: item.room_id })
								.then(res => {
									// 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期 
									if (item.live_status != res.liveStatus) {
										item.live_status = res.liveStatus;
										this.sendRequest({
											url: 'NsWxappLive.Room.modifyRoomStatus',
											data: {
												id: item.id,
												room_id: item.room_id,
												live_status: res.liveStatus
											}
										})
									}
								})
								.catch(err => {
								})
								this.roomList.data.push(item);
							})
							this.roomList.totalPage = res.data.page_count;
							this.roomList.loadingType = page == this.roomList.totalPage ? 'nomore' : 'more';
						} else {
							this.roomList.loadingType = 'nomore';
						}
					},
					fail: res => {
						this.roomList.isLoading = false;
						this.roomList.loadingType = 'nomore';
					}
				})
			},
			/**
			 * 获取正在直播中的直播间
			 */
			getLiveingList(){
				this.sendRequest({
					url: 'NsWxappLive.Room.roomList',
					data: {
						page_index: 1,
						live_status: 101
					},
					success: res => {
						if (res.code == 0 && res.data.total_count) {
							this.liveingList = res.data.data;
						} 
					}
				})
			},
			/**
			 * 下拉刷新
			 */
			onPullDownRefresh() {
				this.getRoomList(1);
				this.getLiveingList();
			}
		},
		filters:{
			livetime(date){
				if (date && date.length) {
					let dateArr = date.split(' ');
					if (dateArr[1]) {
						let timeArr = dateArr[1].split(':');
						return timeArr[0] + ':' + timeArr[1];
					}
				}
				return date;
			}
		}
	}
</script>

<style lang="scss">
@import "../public/css/list.scss";
</style>
<style scoped>
/deep/ ::-webkit-scrollbar {  
  display: none;  
} 
</style>